<html>
<head>
	<title>TBox</title>

	<script type="text/javascript">
		function saveOptions() {
			var options = document.getElementsByTagName('input');

			/* Save options */
			for (var i = 0; i < options.length; i++) {
				var name  = options[i].getAttribute('id');
				var type  = options[i].getAttribute('type');
				var value;

				if (type == 'checkbox')
					value = options[i].checked;
				else
					value = options[i].value;

				/* Save option */
				localStorage[name] = value;
			}

			/* Show notification */
			chrome.extension.sendRequest({
				method: 'showNotification',
				title: 'TBox',
				text: 'Opciones guardas satisfactoriamente.'
			});
		}

		function loadOptions() {
			var options = document.getElementsByTagName('input');

			/* Load options */
			for (var i = 0; i < options.length; i++) {
				var name  = options[i].getAttribute('id');
				var type  = options[i].getAttribute('type');
				var value = localStorage[name];

				/* Default values */
				if (value == undefined) {
					switch (name) {
					case 'autoclose':
						value = 5; break;
					default:
						value = true;
					}
				}

				/* Load option */
				if (type == 'checkbox')
					options[i].checked = eval(value);
				else
					options[i].value = value;
			}
		}
	</script>

	<style type="text/css">
		body {
			font-family: Verdana, Arial;
			font-size: 12px;
			background: #f0f0f0;
			margin: 0;
		}

		td {
			padding: 4px;
		}

		#header {
			padding: 10px;
			border-bottom: 1px solid #b4b4b4;
		}

		#container {
			background: #ffffff;
			padding: 10px;
			padding-top: 20px;
			padding-bottom: 20px;
		}

		#footer {
			padding: 10px;
			border-top: 1px solid #b4b4b4;
			text-align: center;
		}

		#options {
			width: 500px;
			margin: auto;
			border: 0px;
		}

		#credits {
			width: 500px;
			margin: auto;
			font-size: 11px;
		}

		#title {
			font-size: 28px;
		}

		#save {
			padding: 10px;
			text-align: center;
		}

		#autoclose {
			width: 40px;
		}

		.note {
			font-size: 11px;
		}
	</style>
</head>

<body onload="loadOptions()">

<div id="header">
	<table>
	<tr>
		<td><img src="favicon.png" alt="Tuentop" />&nbsp;</td>
		<td id="title">[TBox] <strong>Opciones</strong></td>
	</tr>
	</table>
</div>

<div id="container">
	<table id="options">
		<tr>
			<td>
				Mostrar notificaciones de chat:
			</td>
			<td>
				<input id="chat_monitor" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Mostrar notificaciones de mensajes privados:
			</td>
			<td>
				<input id="priv_monitor" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Mostrar lista r&aacute;pida de amigos:
			</td>
			<td>
				<input id="friend_list" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Activar carga as&iacute;ncronia:
			</td>
			<td>
				<input id="async_load" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Activar cabecera fija:
			</td>
			<td>
				<input id="fixed_header" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Mostrar avisos durante la carga as&iacute;ncrona:<br />
				<span class="note">(solo funciona si la opci&oacute; de carga as&iacute;ncrona esta activada)</span>
			</td>
			<td>
				<input id="async_tipbox" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Permitir descarga de fotograf&iacute;as:
			</td>
			<td>
				<input id="photo_dl" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Activar rotaci&oacute;n de fotograf&iacute;as:
			</td>
			<td>
				<input id="photo_rotate" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Mostrar emisoras de radio:
			</td>
			<td>
				<input id="radio_tuner" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Mostrar clasificaci&oacute;n de la Liga:
			</td>
			<td>
				<input id="widget_as" type="checkbox" />
			</td>
		</tr>
		<tr>
			<td>
				Tiempo de auto-cierre de notificaciones:<br />
				<span class="note">(en segundos, utilizar el valor 0 para no cerrar automaticamente)</span>
			</td>
			<td>
				<input id="autoclose" type="text" />
			</td>
		</tr>
		<tr>
			<td id="save" colspan="2">
				<button onclick="saveOptions()">Guardar</button>
			</td>
		</tr>
	</table>
</div>

<div id="footer">
	<strong>Cr&eacute;ditos:</strong>
	Jorge Urios Ferrando
</div>

</body>
</html> 
